<template>
  <div class="f-ab canvas-zone">
    <div class="edit-area-wrap">
      <div class="edit-area">
          <div class="f-ab page-container">
            <hy-music v-show="slide.music && slide.music.id" :music="slide.music"></hy-music>
            <div class="f-ab page"  v-el:page :style="currentPage.style">
                <img v-if="currentPage.style.image" style="width:100%;height:100%;" :src="currentPage.style.image | realImgSrc">  
                <component
                  v-for="(index, comp) in currentPage.comps" track-by="$index"
                  :is="comp.type" 
                  :class="[comp.type, currentComp == comp ? 'active': '']"
                  :comp="comp"
                  v-ref:list
                  @click.stop="activeComp(comp, index)"
                  @mousedown.stop="activeComp(comp, index)"
                >
                </component >                 
            </div>            
          </div>
      </div>
      <!-- 侧边工具栏 -->
      <div class="edit-area-tool">
        <div class="tool-wrap clearfix">
          <a href="javascript:;" class="btn btn-default btn-sm" title="预览" @click="preview">
            <i class="icon-play"></i>
          </a>       
          <a href="javascript:;" class="btn btn-default btn-sm" title="撤销" @click="undo">
            <i class="icon-undo"></i>
          </a>
          <a href="javascript:;" class="btn btn-default btn-sm" title="重做" @click="redo">
            <i class="icon-repeat"></i>
          </a>
        </div>
      </div> 
      <!-- 调试 -->
      <debug-zone :slide="slide"></debug-zone>
    </div>

    <!--工具菜单-->
    <tool-zone
      :current-page.sync="currentPage"
      :current-comp.sync="currentComp"
      :show-picture-dialog.sync="showPictureDialog"
    >
    </tool-zone> 

    <!-- 右键菜单 -->
    <context-menu 
      :target="$els.page"
      :handle="{
        '上移一层': 'setHeigher',
        '下移一层': 'setLower',
        '置于顶层': 'setTop',
        '置于底层': 'setBottom',
        '---': false,
        '复制图层': 'copyCurComp',
        '删除图层': 'delCurComp'}"
      >
    </context-menu>
  </div>  
</template>
<script>
  export default {
    props: {
      slide: {
        type: Object,
        required: true,
        twoway: true
      },          
      currentPage: {
        type: Object,
        required: true
      },
      currentComp: {
        type: Object,
        required: true,
        twoway: true
      },
      showPictureDialog: {
        type: Boolean,
        required: true,
        twoway: true
      }      
    },
    ready: function(){
      var _this = this;
      $(_this.$els.page).on('click', function(){
        _this.currentComp = {
          type: 'hy-page'
        } 
        _this.currentPage.comps.map(function(item){
          item.active = false;
          return item;
        });                
      });
    },    
    methods: {
      activeComp: function(comp, index) {
        this.currentPage.comps.map(function(item){
          item.active = false;
          return item;
        });
        this.currentComp = comp;
        this.currentComp.active = true;
        this.currentCompIndex = index;
      },
      preview: function(){
        this.currentPage.comps.map(function(item){
          item.active = false;
          return item;
        });
        this.currentComp = {
          type: 'hy-page'
        };         
        $('.edit-area .animated').each(function(index, item){
          var oldName = $(item).css('animation-name');
          $(item).css({
            animationName: '',
            visibility: "hidden"
          });
          setTimeout(function(){
            $(item).css({
              visibility: "visible",
              animationName: oldName
            });
          }, 0)
        })
      },
      // 设置显示顺序
      setOrder: function(arr, index, type){
        if(type === 'top'){
          var target = arr.splice(index, 1)[0];
          arr.push(target);
        }
        else if(type === 'bottom'){
          var target = arr.splice(index, 1)[0];
          arr.unshift(target);
        }
        else if(type == 'lower'){
          if(index - 1 >= 0 ){
            var target = arr.splice(index, 1)[0];
            arr.splice(index - 1, 0, target);
          }
        }
        else if(type == 'higher'){
          if(index + 2 <= arr.length){
            var target = arr.splice(index, 1)[0];
            arr.splice(index + 1, 0, target);
          }
        }
      },
      undo: function(){
        console.log('undo');
      },
      redo: function(){
        console.log('redo');
      }      
    },
    events: {
      // 上移一层
      setHeigher: function(){
        this.setOrder(this.currentPage.comps, this.currentCompIndex,'higher');
      },
      // 下移一层
      setLower: function(){
        this.setOrder(this.currentPage.comps, this.currentCompIndex,'lower');
      },
      // 置于顶层
      setTop: function(){
        this.setOrder(this.currentPage.comps, this.currentCompIndex,'top');
      },
      // 置于底层
      setBottom: function(){
        this.setOrder(this.currentPage.comps, this.currentCompIndex,'bottom');
      },
      // 复制图层
      copyCurComp: function(){
        var newComp = $.extend(true, {}, this.currentComp);
        this.currentPage.comps.push(newComp);
        this.activeComp(newComp, this.currentPage.comps.length - 1);      
      },  
      // 删除图层
      delCurComp: function(){
        this.currentPage.comps.$remove(this.currentComp);
        this.currentComp = {
          type: 'hy-page'
        }
      }       
    },
    components:{
      debugZone: require('./debugZone.vue'),
      toolZone: require('./toolZone.vue'),
      hyText : require('./component/hyText.vue'),
      hyButton : require('./component/hyButton.vue'),
      hyImage : require('./component/hyImage.vue'),
      hyMusic : require('./component/hyMusic.vue'),   
      hyForm : require('./component/hyForm.vue'), 
      contextMenu : require('./plugin/contextMenu.vue') 
    }    
  }
</script>
<style scoped>
  .tool-wrap {
    width: 30px;
  }
  .tool-wrap .btn{
    margin-bottom: 5px;
    float: left;
  }
  .page {
    text-align: center;
    background-color: #fff;
    color: #666;
    background-size: cover;
    background-position: 50% 50%;  
  }
  .page.active {
    z-index: 10;
  }
</style>